<template>
  <div class="swiper-wrap">
    <swiper :options="swiperOpts" class="gallery-top" ref="swiperTop">
      <swiper-slide
        v-for="(img, index) in imgs"
        :key="index"
      >
        <img :src="$baseImgUrl + img"/>
      </swiper-slide>
    </swiper>
    <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
      <swiper-slide
        v-for="(img, index) in imgs"
        :key="index"
      >
        <img :src="$baseImgUrl + img"/>
      </swiper-slide>
    </swiper>
    <div class="swiper-button-prev el-icon-arrow-left"></div>
    <div class="swiper-button-next el-icon-arrow-right"></div>
  </div>
</template>

<script>
export default {
  name: 'CompanyGallery',
  props: {
    imgs: {
      type: Array,
      default() {
        return [
          'home/warrant01.png',
          'home/warrant02.png',
          'home/warrant03.png',
          'home/warrant04.png',
          'home/warrant01.png',
          'home/warrant02.png',
          'home/warrant03.png',
          'home/warrant04.png',
          'home/warrant01.png',
          'home/warrant02.png',
          'home/warrant03.png',
          'home/warrant04.png'
        ];
      }
    }
  },
  data() {
    return {
      swiperOpts: {
        spaceBetween: 10
      },
      swiperOptionThumbs: {
        spaceBetween: 10,
        slidesPerView: 6,
        slideToClickedSlide: true,
        navigation: {
          prevEl: '.swiper-button-prev',
          nextEl: '.swiper-button-next'
        },
        on: {
          click() {
            this.controller.control.slideTo(this.clickedIndex);
          }
        }
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.$el.swiper;
      const swiperThumbs = this.$refs.swiperThumbs.$el.swiper;
      this.swiperTop = swiperTop;
      this.swiperThumbs = swiperThumbs;
      swiperTop.controller.control = swiperThumbs;
      swiperThumbs.controller.control = swiperTop;
    });
  }
};
</script>

<style lang="less" scoped>
  .swiper-wrap {
    position: relative;
    height: 500px;
    padding: 10px;
    img {
      width: 100%;
      height: 100%;
    }
    .gallery-top {
      height: 400px;
    }
    .gallery-thumbs {
      margin: 20px 30px 0;
      height: 60px;
    }
    .swiper-button-prev,
    .swiper-button-next {
      top: auto;
      bottom: 10px;
      width: 18px;
      height: 60px;
      text-align: center;
      background: #333;
      color: #fff;
      opacity: 1;
      &::after {
        content: '';
      }
    }
    .swiper-button-disabled {
      background-color: #aaa;
    }
    .swiper-button-prev {
      left: 10px;
    }
    .swiper-button-next {
      right: 10px;
    }
  }
</style>
